<cfcomponent output="false">
	<cfset $ = application.helpers />
	<cfset $views = application.v />
	<cfset $service = application.s />
	
	<!--- --->
	
	<cffunction name="renderPaymentArea" access="public" output="true" returntype="string">
		<cfargument name="fundID" required="true" />
		
		<cfset var local = {} />
		
		<cfset local.frequencies = $service.paymentService.getFrequencies() />
		<cfset local.boundaries = $service.paymentService.getBoundaries() />
		
		<cfsavecontent variable="local.result">
			#$.render.radio(name="type",labels=["Payment Plan"],values=[1],value="1",onchange="Fund.changeSinglePayment('#arguments.fundID#');")#
			<span class="instructions" style="vertical-align:top;line-height:23px;">&nbsp;&nbsp;or&nbsp;&nbsp;</span>
			#$.render.radio(name="type",labels=["Single Payment"],values=[0],value="1",onchange="Fund.changeSinglePayment('#arguments.fundID#');")#
			<table class="payment_plan">
				<tr>
					<td class="frequency_td" style="width:18%">
						<div class="instructions"><b>1</b>. Select Frequency</div>
						#$.render.radio(
							name="frequency_#arguments.fundID#",
							query=local.frequencies,
							value=local.frequencies.id,
							vertical="true",
							width="77px"
						)#
					</td>
					<td class="limit_td" style="width:24%">
						<div class="instructions"><b>2</b>. Select Limit Type</div>
						#$.render.radio(
							name="limit_#arguments.fundID#",
							query=local.boundaries,
							value=local.boundaries.id,
							vertical=true,
							onchange="Fund.changeLimit('#arguments.fundID#');"
						)#
					</td>
					<td style="width:20%">
						<div class="instructions"><span class="define_number" style="font-weight:bold">3</span>. Define <span class="define_word">Installments</span></div>
						
						<div class="limit_1" style="display:none;">
							<div class="sub-instruction">Number of Payments</div>
							<input name="installments" value="4" style="width:60px;">
						</div>
						
						<div class="limit_2" style="display:none;">
							<div class="sub-instruction">Total Amount</div>
							<span class="instructions">$ </span><input title="Total Amount" name="total_amount" value="100.00" validate="money,positive" style="width:51px;" />
						</div>
						
						<div class="sub-instruction">Payment Amount</div>
						<span class="instructions">$ </span><input title="Installment Amount" name="amount" value="20.00" validate="money,positive" style="width:51px;" />
						
						<div class="date_div">
							<div class="sub-instruction">First Payment <span class="first_payment_today">On</span></div>
							<input name="date" value="#$.date.getDate()#" validate="date" style="width:60px;" onchange="Fund.assessPaymentDate('#arguments.fundID#');" onkeyup="Fund.assessPaymentDate('#arguments.fundID#');">
						</div>
						
						<div class="limit_3" style="display:none;">
							<div class="sub-instruction">End Payments on</div>
							<input name="end_date" value="12/31/#year(now())#" validate="date" style="width:60px;">
						</div>
					</td>
					<td style="width:20%">
						<div class="instructions"><span class="comment_number" style="font-weight:bold">4</span>. Leave a Message</div>	
						<div style="width:93px;overflow:visible;">
							<textarea name="message" placeholder="80 Chars Max" style="width:100px;height:48px;"></textarea>
						</div>
						<div class="sub-instruction" style="margin-bottom:2px;">Remain Anonymous</div>
						#$.render.radio(
							name="anonymous_#arguments.fundID#",
							value=0
						)#
						<input name="fundID" type="hidden" value="#arguments.fundID#" />
						<div style="display:none" class="hidden_forms">
							<input name="today" value="#$.date.getDate()#" type="hidden" />
						</div>
					</td>
					<td class="payment_method_td" id="payment_method_td_#arguments.fundID#" style="width:110px;">
						#renderPaymentAccounts(arguments.fundID)#
					</td>
				</tr>
			</table>
		</cfsavecontent>
		
		<cfreturn $.render.clean(local.result) />
		
	</cffunction>
	
	<!--- --->
	
	<cffunction name="renderPaymentAccounts" access="public" output="true" returntype="string">
		<cfargument name="fundID" required="true" />
		
		<cfset sleep(2000) />
		
		<cfset var local = {} />
		<cfset local.name = "payment_account_id_#arguments.fundID#" />
		
		<cfif session.loggedin>
			<cfset local.paymentAccounts = $service.paymentService.getPaymentAccounts() />
			<cfset local.firstAccountID = local.paymentAccounts.id />
			<cfset queryAddRow(local.paymentAccounts) />
			<cfset querySetCell(local.paymentAccounts,'id','add') />
			<cfset querySetCell(local.paymentAccounts,'name','Add +') />
			<cfset querySetCell(local.paymentAccounts,'description','Click to add a payment method') />
			
			<cfsavecontent variable="local.result">
				<div class="instructions" style="white-space:nowrap"><span class="payment_method_number" style="font-weight:bold">5</span>. Select Payment Method</div>
				#$.render.radio(
					name=local.name,
					query=local.paymentAccounts,
					value=local.firstAccountID,
					vertical=true,
					onchange="Fund.addPaymentMethod('#local.name#')"
				)#
				<button class="confirm" onclick="javascript:Fund.savePaymentPlan('#arguments.fundID#');">
					#$.render.img(path='/icons/coin_white.png',style="margin-left:-4px;margin-bottom:-2px;")# 
					Confirm
				</button>
				
				<div style="display:none" class="hidden_forms">
					#renderPaymentMethodEntry()#
				</div>
			</cfsavecontent>
		<cfelse>
			<cfsavecontent variable="local.result">
				<div class="login_for_payments">
					<div class="instructions" style="white-space:nowrap"><span class="payment_method_number" style="font-weight:bold">5</span>. Payment Method</div>
					<button class="confirm" onclick="javascript:Modal.open('loginForm');">
						#$.render.img(path='/icons/coin_white.png',style="margin-left:-4px;margin-bottom:-2px;")# 
						Login
					</button>
					<a href="javascript:Modal.open('payment_method_form');" style="font-size:12px;white-space:nowrap;">Prefer Not to Log In?</a>
				</div>
				
				<div class="not_logged_in_payments" style="display:none;">
					<div class="instructions" style="white-space:nowrap"><span class="payment_method_number" style="font-weight:bold">5</span>. Enter Payment Details</div>
					<div class="sub-instruction">#$.render.star()# Email Address</div>
					<input style="width:109px;">
					
					<div class="sub-instruction">#$.render.star()# Name on Card</div>
					<input style="width:109px;">
					
					<div class="sub-instruction">#$.render.star()# Address</div>
					<input style="width:109px;">
					<input style="width:109px;">
					
					<div class="sub-instruction">#$.render.star()# City</div>
					<input style="width:109px;">
					
					#$.render.select(
						name="state_ID",
						label="State",
						query=$service.resourceService.getStates(),
						blank=true,
						required=true
					)#
					<input name="Zip" value="" style="width:62px;" validate="integer" />
					<a href="javascript:Fund.hideNotLoggedInPayments('#arguments.fundID#');" style="font-size:12px;white-space:nowrap;">Log In</a>
				</div>
				
				<div style="display:none" class="hidden_forms">
					#renderPaymentMethodEntry()#
				</div>
			</cfsavecontent>
		</cfif>

		<cfreturn $.render.clean(local.result) />
		
	</cffunction>
	
	<!--- --->
	
	<cffunction name="renderPaymentMethodEntry" access="public" output="true" returntype="string">
		
		<cfset var local = {} />
		
		<cfset local.formID = "payment_method_form" />
		<cfset local.ccID = $service.paymentService.getPaymentMethods('auth.net.cc').id />
		<cfset local.achID = $service.paymentService.getPaymentMethods('auth.net.ach').id />
		
		<cfsavecontent variable="local.result">
			<div id="#local.formID#">
				#$views.filterView._renderForm(title="Set Payment Method",id=local.formID,collapse=false)#
					<div style="text-align:center;">
						#$.render.radio(
							name="payment_method_id",
							labels=["Credit Card"," Bank Account"],
							values=[local.ccID,local.achID],
							value=local.ccID,
							onchange="Fund.changePaymentMethodType();"
						)#
					</div>
					<div style="float:left;display:inline-block;margin-right:5px;">
						<cfif not session.loggedin>
							<div class="filter-label instructions">
								Email Address
							</div>
							<div style="clear:both">
								<input name="email" value="" placeholder="" title="Email Address" style="" validate="required,email" />
							</div>
						</cfif>
						
						<div class="credit_card_info">
							<div class="filter-label instructions">
								Card Holder's Name
							</div>
							<div style="clear:both">
								<input name="name" value="" placeholder="As it appears on card" title="Credit Holder Name" style="" validate="required" />
							</div>
							
							<div class="filter-label instructions" bubble="This is another bubble message?!.">
								Card Number
							</div>
							<div style="clear:both">
								<input name="number" value="" placeholder="13-16 digits" title="Credit Card Number" style="letter-spacing:1px;" validate="required,positive,integer,maxlength16" onfocusout="javascript:Fund.computeCardName();" />
							</div>
							
							<div class="filter-label instructions" style="width:98px;">
								Expiration Date
							</div>
							<div class="filter-label instructions">
								Security Code
							</div>
							
							<div style="clear:both">
								<input name="month" value="" title="Expiration Month" style="width:40px;letter-spacing:1px;" placeholder="MM" validate="required,integer,positive,maxLength2" />
								<input name="year" value="" title="Expiration Year" style="width:40px;letter-spacing:1px;" placeholder="YY" style="" validate="required,integer,positive,maxLength2" />
								<input name="cvv" value="" title="Security Code" style="width:35px;letter-spacing:1px;" validate="required,integer,positive,maxlength5" />
								#$.render.img(path='icons/cvv.png',style="margin-bottom:-5px;height:18px;")#
							</div>
						</div>
						
						<div class="ach_info" style="display:none;">
							<div class="filter-label instructions" style="margin-bottom:2px;">
								Account Type
							</div>
							<div style="clear:both;">
								#$.render.radio(
									name="account_type",
									labels=["Checking","Saving"],
									values=["chx","sav"],
									value="chx"
								)#
							</div>
							<div class="filter-label instructions" style="margin-top:0px;">
								Routing Number
							</div>
							<div style="clear:both">
								<input name="routing_number" value="" placeholder="9 digit ABA identifier" title="Routing Number" style="letter-spacing:1px;" validate="required,integer,maxlength9,positive" />
							</div>
							
							<div class="filter-label instructions">
								Account Number
							</div>
							<div style="clear:both">
								<input name="account_number" value="" placeholder="" title="Account Number" style="letter-spacing:1px;" validate="required,integer,positive" onfocusout="Fund.computeAccountName();" />
							</div>
						</div>
						
						<!--- alias --->
						<cfif session.loggedin>
							<div class="filter-label instructions" bubble="This is another bubble message?!.">
								Account Nickname
							</div>
							<div style="clear:both">
								<input name="card_name" value="" placeholder="To help identify this" title="Account Nickname" style="" validate="required" />
							</div>
						</cfif>
					</div>
					
					<div style="float:right;display:inline-block;">
						<div class="filter-label instructions">
							Billing Address
						</div>
						<div style="clear:both;">
							<input name="address_1" value="" placeholder="Street Address" title="Street Address" validate="required" />
						</div>
						<div class="filter-label instructions">
							Address 2
						</div>
						<div style="clear:both;">
							<input name="address_2" value="" placeholder="Address 2" title="Street Address 2" validate="" />
						</div>
						#$views.filterView.renderLocationFilter(required=true,no_star=true,query_onchange="")#
					</div>
					
					<div style="clear:both"></div>
					<div class="filterSet-buttons">
						<div class="credit_card_info">
							<button class="small" onclick="Fund.saveCreditCard();">Set Credit Card</button>
						</div>
						<div class="ach_info" style="display:none;">
							<button class="small" onclick="Fund.saveBankAccount();">Set Bank Account </button>
						</div>
						<div class="sub-instruction">
							* No transaction processed yet
						</div>
					</div>

				#$views.filterView.formClose()#
			</div>
			
			<script type="text/javascript">
				$(document).ready(function(){
					Modal.init('#local.formID#','<cfif not session.loggedin>email<cfelse>name</cfif>',334,368);
				});
				jQuery(document).on('keyup','##filterSet_#local.formID# input, ##filterSet_#local.formID# select',function(e){
					if(e.keyCode == 13){
						if(Radio.get('payment_method_id') == '#local.ccID#'){
							Fund.saveCreditCard();
						} else if(Radio.get('payment_method_id') == '#local.achID#'){
							Fund.saveBankAccount();
						}
					}
				})
			</script>
		</cfsavecontent>
		
		<cfreturn $.render.clean(local.result) />
	</cffunction>
	
	<!--- --->
	
	<cffunction name="renderPaymentPlans" access="public" output="true" returntype="string">
		<cfargument name="query" required="true" />
		<cfargument name="target" required="true" hint="fund target" />
		
		<cfset var local = {} />
		<cfset local.paymentPlanID = "" />
		
		<cfsavecontent variable="local.result">
			<cfloop query="arguments.query">
				<cfif arguments.query.id neq local.paymentPlanID>
					<cfif arguments.query.currentRow neq 1>
						</div>
					</cfif>
					<div class="paymentPlan<cfif arguments.query.ended> ended</cfif>">
					<cfif arguments.query.boundary_code eq 'installment' and arguments.query.installments eq 1 and arguments.query.payment_id neq ''>
						<div class="paymentPlan-title">Single payment</div>
					<cfelse>
						<table cellpadding="0" cellspacing="0">
							<tr class="paymentPlan-title">
								<th style="width:88px;">Payment Plan</th>
								<th style="width:80px;">Frequency</th>
								<th style="">Limit</th>
								<cfif arguments.query.ended eq 1>
									<th style="width:75px;">Ended</th>
								<cfelse>
									<th style="width:75px;">Started</th>
								</cfif>
								<th nowrap="nowrap" style="text-align:right;">Payment Method</th>
								<th style="width:40px;">&nbsp;</th>
							</tr>
							<tr>
								<td>
									#$.format.money(arguments.query.installment_amount)#	
								</td>
								<td>#arguments.query.frequency_name#</td>
								<td>
									<cfif arguments.query.boundary_code eq 'installment'>
										until #arguments.query.installments# payments have been made.
									<cfelseif arguments.query.boundary_code eq 'total'>
										until #$.format.money(arguments.query.amount)# has been paid.
									<cfelseif arguments.query.boundary_code eq 'until_date'>
										until #arguments.query.end_date#.
									<cfelseif arguments.query.boundary_code eq 'until_target'>
										until fund target of #$.format.money(arguments.target)# is met.
									<cfelseif arguments.query.boundary_code eq 'until_end'>
										until the fund is closed.
									</cfif>
								</td>
								<cfif arguments.query.ended eq 1>
									<td>#arguments.query.end_date#</td>
								<cfelse>
									<td>#arguments.query.start_date#</td>
								</cfif>
								<td nowrap="nowrap" style="text-align:right;">#arguments.query.payment_account_name#</td>
								<td class="paymentPlan-controls" style="text-align:right;padding-left:7px;" nowrap="nowrap">
									<cfif arguments.query.ended eq 0>
										#$.render.img(path="icons/pencil.png",style="height:14px;cursor:pointer;margin-right:2px;",bubble="Edit this plan")#
										<cfif $.valid.id(arguments.query.payment_id)>
											#$.render.img(path="icons/cancel-circle.png",style="height:14px;cursor:pointer;",bubble="Stop this plan",onclick="Fund.deletePaymentPlan('#arguments.query.id#',this);")#
										<cfelse>
											#$.render.img(path="icons/cancel-circle.png",style="height:14px;cursor:pointer;",bubble="Delete this plan",onclick="Fund.deletePaymentPlan('#arguments.query.id#',this);")#
										</cfif>
									</cfif>
								</td>
							</tr>
						</table>
					</cfif>
				</cfif>
				<cfif $.valid.id(arguments.query.payment_id) and arguments.query.payment_status_name neq 'cancelled'>
					#renderPaymentPlanPayment(
						date=arguments.query.payment_date,
						amount=arguments.query.payment_amount,
						payment_account=arguments.query.payment_payment_account_name,
						payment_status=arguments.query.payment_status_name,
						paymentID=arguments.query.payment_id
					)#
				</cfif>
			</cfloop>
			<cfif arguments.query.recordcount gt 0>
				</div>
			</cfif>
		</cfsavecontent>
		
		<cfreturn $.render.clean(local.result) />
		
	</cffunction>
	
	<!--- --->
	
	<cffunction name="renderPaymentPlanPayment" access="public" output="true" returntype="string">
		<cfargument name="date" required="true" />
		<cfargument name="amount" required="true" />
		<cfargument name="payment_account" required="true" />
		<cfargument name="payment_status" required="true" />
		<cfargument name="paymentID" required="true" />
		
		<cfset var local = {} />
		
		<cfsavecontent variable="local.result">
			<div class="payment-title">
				Payment
			</div>
			<div class="payment">
				<table cellspacing="0" cellpadding="0">
					<tr class="paymentPlan-title">
						<th style="width:100px;">Date</th>
						<th>Amount</th>
						<th>Payment Method</th>
						<th style="text-align:right;">Status</th>
						<th style="width:25px;">&nbsp;</th>
					</tr>
					<tr>
						<td>#arguments.date#</td>
						<td>#$.format.money(arguments.amount)#</td>
						<td>#arguments.payment_account#</td>
						<td style="text-align:right;">#arguments.payment_status#</td>
						<td class="payment-controls">
							#$.render.img(path="icons/cancel-circle-grey.png",style="height:14px;cursor:pointer;margin:0px -2px -2px 13px;",bubble="Cancel this payment",onclick="Fund.cancelPayment('#arguments.paymentID#');")#
						</td>
					</tr>
				</table>
			</div>
		</cfsavecontent>
		
		<cfreturn $.render.clean(local.result) />
		
	</cffunction>
	
	<!--- --->

</cfcomponent>